<template>
  <div>
    <el-container>
      <el-header height="100px"><GHeaderView /></el-header>
      <el-container>
        <el-aside width="100px">
          <LeftCaiPin />
        </el-aside>
        <el-main>
          <div class="era">
            <div class="era1">
              <div>
                搜索：<input type="text" placeholder="请输入要查询的菜品编号" v-model="id" @blur="chaxun()" />
              </div>

              <button @click="stop()">停售</button>
            </div>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                fixed
                prop="adminId"
                label="ID"
                width="200"
                height="30"
              >
              </el-table-column>
              <el-table-column prop="foodId" label="菜品编号" width="200">
              </el-table-column>
              <el-table-column prop="foodname" label="菜品名称" width="200">
              </el-table-column>
              <el-table-column prop="price" label="售价" width="200">
              </el-table-column>
              <el-table-column prop="num" label="剩余数量" width="300">
              </el-table-column>
              <el-table-column prop="zt" label="状态" width="200">
              </el-table-column>
            </el-table>
            <div class="fenye">
              <el-pagination background layout="prev, pager, next" :total="500">
              </el-pagination>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import GHeaderView from "@/components/yanwengang/GHeaderView.vue";
import LeftCaiPin from "@/components/yanwengang/LeftCaiPin.vue";
// import {foodId} from"@/apis/yanwengang/yanwengang.js"
export default {
  components: {
    GHeaderView,
    LeftCaiPin,
  },
  data() {
    return {
      id:"",
      tableData: [
        {
          adminId: "10",
          foodId: "64645642121",
          foodname: "农家小炒肉",
          price: "￥57.00",
          num: 100,
          zt: "正常",
        },
        {
          adminId: "9",
          foodId: "64645642121",
          foodname: "农家小炒肉",
          price: "￥57.00",
          num: 100,
          zt: "正常",
        },
        {
          adminId: "8",
          foodId: "64645642121",
          foodname: "农家小炒肉",
          price: "￥57.00",
          num: 100,
          zt: "正常",
        },
        {
          adminId: "7",
          foodId: "64645642121",
          foodname: "农家小炒肉",
          price: "￥57.00",
          num: 100,
          zt: "正常",
        },
        {
          adminId: "6",
          foodId: "64645642121",
          foodname: "农家小炒肉",
          price: "￥57.00",
          num: 100,
          zt: "正常",
        },
        {
          adminId: "5",
          foodId: "64645642121",
          foodname: "农家小炒肉",
          price: "￥57.00",
          num: 100,
          zt: "正常",
        },
        {
          adminId: "4",
          foodId: "64645642121",
          foodname: "农家小炒肉",
          price: "￥57.00",
          num: 100,
          zt: "正常",
        },
        {
          adminId: "3",
          foodId: "64645642121",
          foodname: "农家小炒肉",
          price: "￥57.00",
          num: 100,
          zt: "正常",
        },
        {
          adminId: "2",
          foodId: "64645642121",
          foodname: "农家小炒肉",
          price: "￥57.00",
          num: 100,
          zt: "正常",
        },
        {
          adminId: "1",
          foodId: "64645642121",
          foodname: "农家小炒肉",
          price: "￥57.00",
          num: 100,
          zt: "正常",
        },
      ],
    };
  },
  methods:{
    chaxun(){
     
    }
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.el-aside {
  background-color: #d3dce6;
  text-align: center;
  height: auto;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 50px;
  height: auto;
}

.era1 {
  /* width: 100%; */
  height: 100px;
  border: 1px solid #ccc;
  line-height: 100px;
  display: flex;
  justify-content: space-evenly;
}
.era1 input {
  width: 300px;
  height: 30px;
  border: 0;
}
.era1 button {
  width: 100px;
  height: 50px;
  margin: 25px;
  background-color: rgb(83, 215, 238);
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
}
.fenye {
  margin-top: 8px;
}
</style>